<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单显示与隐藏</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
           $("h2").click(function(){
               let u = this.nextSibling.nextSibling
               if($(u).css("display") == "none"){
                   // $("ul").css("display","none");
                   $("ul").hide();
                   // $(u).css("display","block");
                   $(u).show();
                   return;
               }
               // $(u).css("display","none");
               $(u).hide();
           });
        });
    </script>
</head>
<body>
<!--
    三个列表点击某一个时会触发显示或者隐藏的效果
    原本如果是显示,则隐藏起来
    原本如果是隐藏,则显示出来
    且三个列表,最多显示一个出来
    其他两个必须处于隐藏状态
-->
<h2>您
    乐</h2>
<ul style="display: none;">
    <li>小苹果</li>
    <li>月亮之上</li>
    <li>荷塘月色</li>
    <li>自由飞翔</li>
</ul>
<h2>您最喜欢的综艺节目</h2>
<ul style="display: none;">
    <li>奔跑吧</li>
    <li>极限挑战</li>
    <li>中餐厅</li>
    <li>王牌对王牌</li>
</ul>
<h2>您最喜欢的电视剧</h2>
<ul style="display: none;">
    <li>亮剑</li>
    <li>西游记</li>
    <li>三国演义</li>
    <li>情深深雨蒙蒙</li>
    <li>还珠格格</li>
</ul>
</body>
</html>